<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>企业注册</title>
    <link rel="stylesheet" th:href="@{/layui1/css/layui.css}" media="all">
    <script th:src="@{/layui1/layui.js}"></script>
    <script th:src="@{/js/jquery-1.8.3.min.js}"></script>
</head>
<style>
    #container {
        width: 900px;
        height: 700px;
        margin-right: 300px;
        margin-top: -800px;
        float: right;
    }

    #content {
        width: 500px;
        background-color: gray;
        margin: 100px;
        padding: 10px;
        border: 1px solid orange;
        border-radius: 10px;
    }

</style>
<body>
<div id="content">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">加油站名称</label>
            <div class="layui-input-block">
                <input type="text" name="petrolStationName" required lay-verify="required" lay-reqtext="加油站名称不能为空"
                       placeholder="请输入加油站名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地理位置</label>
            <div class="layui-input-block">
                <input type="text" name="geographicPosition" id="mappor" required lay-verify="required" lay-reqtext="地理位置不能为空"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">加油站地址</label>
            <div class="layui-input-block">
                <input type="text" name="site" id="map" required lay-verify="required" lay-reqtext="加油站地址不能为空"
                       placeholder="请输入加油站地址" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主管公安机关</label>
            <div class="layui-input-block">
                <input type="text" name="" required lay-verify="required" lay-reqtext="主管公安机关不能为空"
                       placeholder="请选择主管公安机关" autocomplete="off"
                       class="layui-input dept_name">
                <input type="number" name="deptId" autocomplete="off" class="layui-input dept_id" style="display:none;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">加油站性质</label>
            <div class="layui-input-block">
                <select name="nature" lay-filter="aihao">
                    <option value="0">中石化</option>
                    <option value="1">中石油</option>
                    <option value="2">社会民营</option>
                    zz
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">职工人数</label>
            <div class="layui-input-block">
                <input type="text" name="staffAmount" lay-verify="title" autocomplete="off"
                       placeholder="请输入职工人数" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">加油机数量</label>
            <div class="layui-input-block">
                <input type="text" name="tankerAmount" lay-verify="title" autocomplete="off"
                       placeholder="请输入加油机数量" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">法人姓名</label>
            <div class="layui-input-block">
                <input type="text" name="legalPersonName" lay-verify="required" lay-reqtext="法人姓名岂能为空？"
                       placeholder="请输入法人姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">法人身份证号</label>
            <div class="layui-input-block">
                <input type="text" name="legalPersonCard" lay-verify="required|identity" lay-reqtext="法人身份证号岂能为空？"
                       placeholder="请输入法人身份证号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">法人联系方式</label>
            <div class="layui-input-block">
                <input type="text" name="legalPersonPhone" lay-verify="required|phone" lay-reqtext="法人联系方式岂能为空？"
                       placeholder="请输入法人联系方式" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">保卫组织负责人</label>
            <div class="layui-input-block">
                <input type="text" name="defendPrincipal" lay-verify="title" autocomplete="off"
                       placeholder="请输入保卫组织负责人" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">保卫组织负责人电话号码</label>
            <div class="layui-input-block">
                <input type="tel" name="defendPhone" lay-verify="required|phone" autocomplete="off"
                       placeholder="请输入保卫组织负责人电话号码" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" align="center">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="userSaveBtn">
                    <i class="layui-icon layui-icon-release"></i> 注册
                </button>
            </div>
            <div class="layui-inline">
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius"><i
                        class="layui-icon layui-icon-refresh"></i>重置
                </button>
            </div>
            <div class="layui-inline">
                <button id="contentBtn" class="layui-btn layui-btn-sm layui-btn-primary"
                        style="border: none;background-color: gray"><i class="layui-icon layui-icon-about"
                                                                       style="color: red"></i>
                </button>
            </div>
        </div>
    </form>
</div>

<!--派出所选择树-->
<div class="layui-form-item" id="choose_dept_menu" style="display: none">
    <label class="layui-form-label">主管公安机关</label>
    <div class="layui-input-inline">
        <div id="deptTree" class="demo-tree-more"></div>
    </div>
</div>


<table align="center" style="width:800px;display: none" class="table_add" cellpadding="0" cellspacing="0" id="tab">
    <tr>
        <td colspan="2">注册步骤说明</td>
    </tr>
    <tr>
        <td>
            <ul style="color:red">
                <li style="list-style-type:none;">1、企业信息注册后，需等待审核.</li>
                <li style="list-style-type:none;">2、审核通过后，才能注册账号。</li>
                <li style="list-style-type:none;">3、同一个企业只允许注册一次。</li>
            </ul>
        </td>
    </tr>
</table>
<div id="container"></div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=IStimg6KTk26SnTOOrrx6VrZ2wlSnZQy"></script>
<script type="text/javascript">

    var map = new BMap.Map("container"); // 创建地图实例
    var point = new BMap.Point(113.950347, 22.541439); // 创建点坐标
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);
    var geoc = new BMap.Geocoder();


    map.addEventListener("click", function (e) {
        var address = e.point.lng + "," + e.point.lat;
        $("#pointaddress").attr("value", address);
        var pt = e.point;
        $("#mappor").val(JSON.stringify(pt.lng)+JSON.stringify(pt.lat));

        geoc.getLocation(pt, function (rs) {
            var addComp = rs.addressComponents;
            $("#provinces").attr("value", addComp.province);
            $("#city").attr("value", addComp.city);
            $("#town").attr("value", addComp.district);
            //省、市、区、街道、街道号
            var a = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;

            $("#map").val(a);

        });
    });
</script>
<script>
    layui.use(['form', 'tree', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer;

        var tree = layui.tree;
        //监听提交
        form.on('submit(userSaveBtn)', function (data) {
            $.ajax({
                url: '/SignIn/addPetrolStation',
                dataType: 'json',
                type: 'POST',
                data: data.field,
                success: function (result) {
                    if (result.code == 0) {
                        window.location.href = '/login.html';
                    }
                }
            })
            return false;
        });

        //点击主管公安机关弹出派出所树
        $(".dept_name").click(function () {
            $.ajax({
                url: '/SignIn/findDept',
                dataType: 'json',
                contentType: "application/json;charset=UTF-8",
                type: 'GET',
                success: function (result) {
                    //基本演示
                    tree.render({
                        elem: '#deptTree'
                        , data: result
                        , onlyIconControl: true
                        , click: function (obj) {
                            /*alert(obj.data.id);*/ //得到当前点击的节点数据的id
                            /*alert(obj.data.title);*/ //得到当前点击的节点数据的名字
                            $(".dept_id").val(obj.data.id);
                            $(".dept_name").val(obj.data.title);
                            layer.close(index);
                        }
                    });
                }
            });
            var index = layer.open({
                title: '选择主管派出所',
                type: 1,
                content: $('#choose_dept_menu'),
                area: ['550px', '450px']
            });

        });

        $("#contentBtn").click(function () {
            var that = this;
            layer.tips("1、企业信息注册后，需等待审核。</br>" +
                "2、审核通过后，才能注册账号。</br>" +
                "3、同一个企业只允许注册一次。", that); //在元素的事件回调体中，follow直接赋予this即可
        });
    });
</script>
</html>